import React from 'react'
import { message,Form, Input, Button, Checkbox } from 'antd';
import { UserOutlined, LockOutlined } from '@ant-design/icons';
import './login.css'
import {Route,Switch,Redirect} from 'react-router-dom';
import {useSelector,useDispatch,connect} from 'react-redux'


const Login = (props) => {
  const login = useSelector(state=> state.login.islogin)
  const dispatch = useDispatch();


    const onFinish = (values) => {
        fetch("http://49.233.107.127:2002/login",{
          method:'post',
          headers:{
            'content-type':'application/json'
          },
          body:JSON.stringify(values)
        })
        .then(res=>res.json())
        .then(res=>{
          if(res.status == 'success'){
            dispatch({type:'login',value:res.data});
            message.success('登录成功！');
            props.history.replace(props.location.state || '/');
          }else{
            message.error('用户名或者密码错误');
          }
        })
        
      };
    return (
      <div id="back">
        <div className="exter">
          <div className="fram">
            <div className="exter-son"><h2>欢迎登录</h2></div>
        <Form
      name="normal_login"
      className="login-form"
      initialValues={{
        remember: true,
      }}
      onFinish={onFinish}
    >
      <Form.Item
        name="username"
        rules={[
          {
            required: true,
            message: '请输入用户名',
          },
        ]}
      >
        <Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder="用户名" />
      </Form.Item>
      <Form.Item
        name="password"
        rules={[
          {
            required: true,
            message: '请输入密码',
          },
        ]}
      >
        <Input
          prefix={<LockOutlined className="site-form-item-icon" />}
          type="password"
          placeholder="密码"
        />
      </Form.Item>
      <Form.Item>
        <Form.Item name="remember" valuePropName="checked" noStyle>
          <Checkbox>记住我</Checkbox>
        </Form.Item>
      </Form.Item>

      <Form.Item>
        <Button type="primary" htmlType="submit" className="login-form-button">
          登录
        </Button>
      </Form.Item>
    </Form>
    </div>
    </div>
    </div>
    
    )
}

export default Login

